<template>
  <div class="map-container">
    <!-- 百度地图 -->
    <baidu-map v-if="showMapType==1&&currentMapType==1&&!svgMap" ref="bMap"></baidu-map>
    <!-- unity地图 -->
    <u-map v-if="defultMapType==4&&!svgMap" ref="uMap" :class="{'is-show':showUnityMap}" @goFMap="goFMap"></u-map>
    <!-- 蜂鸟地图 -->
    <f-map v-if="(showMapType==2||defultMapType==4)&&!svgMap" :class="{'is-show':!showUnityMap&&currentMapType==2}" ref="fMap"></f-map>
    <!-- svg静态图 -->
    <svg-map v-if="svgMap"></svg-map>
  </div>
</template>

<script>
import BaiduMap from './BaiduMap'
import FMap from './FMap'
import UMap from './UnityMap'
import SvgMap from '../Map/SvgMap'
export default {
  name: 'HomeMap',
  components: {
    BaiduMap,
    FMap,
    UMap,
    SvgMap,
  },
  data() {
    return {
      modelName: 'BaiduMap',
      showMapType:
        this.$store.state.userInfo.mapType &&
        !this.$store.state.userInfo.isMuilUnitUser
          ? this.$store.state.userInfo.mapType
          : this.bsConfig.MapOptions.defultMap,
      defultMapType: '',
      svgMap: this.bsConfig.MapOptions.svgMap,
    }
  },
  computed: {
    showUnityMap() {
      return this.currentMapType == 4
    },
    currentMapType() {
      return this.$store.state.currentMapType
    },
  },
  created: function () {
    this.defultMapType =
      this.$store.state.userInfo.mapType &&
      !this.$store.state.userInfo.isMuilUnitUser
        ? this.$store.state.userInfo.mapType
        : this.bsConfig.MapOptions.defultMap
    localStorage.setItem('ilinkBs_defultMapType', this.defultMapType)
    // 对外暴露地图初始化方法
    window.FunList.drawMapBydata = this.drawMapBydata
    // 对外暴露打点方法
    window.FunList.drawMapMark = this.drawMapMark
  },
  methods: {
    /*
     *  地图初始化
     *  【参数说明】
     *     type ———— 地图类型 （1：百度；2：蜂鸟；4：unity）
     *     options ———— 地图配置信息
     *     callback ———— 回调方法
     */
    drawMapBydata(type, options, callback) {
      let that = this
      that.showMapType = type
      this.$store.commit('setCurrentMapType', type)
      if (type == 1) {
        that.modelName = 'BaiduMap'
        that.$nextTick(() => {
          that.$refs.bMap && that.$refs.bMap.initBaiduMap(options, callback)
        })
      } else if (type == 2) {
        that.modelName = 'FMap'
        that.$nextTick(() => {
          that.$refs.fMap && that.$refs.fMap.initFengMap(options, callback)
        })
      } else if (type == 4) {
        that.modelName = 'UMap'
        that.$nextTick(() => {
          that.$refs.uMap && that.$refs.uMap.init(options, callback)
        })
      } else {
        console.log('未匹配到对应地图类型')
      }
    },
    /*
     *  地图打点
     *  【参数说明】
     *     options ———— 请求打点的数据
     *     isClear 是否清空地图标注物，默认true
     *     isFormHome 是否首页，默认false
     */
    drawMapMark(options, isClear, isFormHome) {
      let that = this
      let mapType = localStorage.getItem('ilinkBs_currentMapType')
      if (mapType == 1) {
        // 更新百度地图标注物体
        that.$refs.bMap &&
          that.$refs.bMap.initBaiduMapMarks(options, isClear, isFormHome)
      } else if (mapType == 2) {
        // 更新蜂鸟地图标注物体
        that.$refs.fMap &&
          that.$refs.fMap.initFengMapMarks(options, isClear, isFormHome)
      } else if (mapType == 4) {
        // 更新unity地图标签
        that.$refs.uMap &&
          that.$refs.uMap.updateMark(options, isClear, isFormHome)
      } else {
        console.log('未匹配到对应地图类型')
      }
    },
    // 从unity跳转蜂鸟地图
    goFMap(data) {
      // 进入单位安全指数评分
      this.$refs.fMap.fengmapDomClik(data.markType, data.param)
      this.$store.commit('setCurrentMapType', 2)
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.map-container {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #141c2e;
  .fmap-container,
  .umap-container {
    display: none;
    &.is-show {
      display: block;
    }
  }
}
</style>
